<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*绘制*/
    ctx.moveTo(100,100.5);
    ctx.lineTo(200,100.5);
    /*数组是用来描述你的排列方式的*/
    /*ctx.setLineDash([5]);
    ctx.setLineDash([5,10]);
    ctx.setLineDash([5,10,15]);*/
    ctx.setLineDash([5,10,15,20]);
    /*获取虚线的排序方式 获取的是不重复的那一段*/
    /*[5] log-> [5,5]*/
    console.log(ctx.getLineDash());
    /*偏移 负值向右偏移*/
    ctx.lineDashOffset = -20;
    ctx.stroke();
</script>
</body>
</html>
